<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-04-27 00:56:11
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
  <div class="title">
    You Are Viewing
    <el-select model-value="1">
      <el-option value="1" label="All Accounts" />
    </el-select>
  </div>
  <div class="title" style="margin-top:20px">
    Overview
  </div>
  <line-chart v-bind="config" :data="data" class="chart" />
  <pro-table
    ref="table"
    title="Bank Account"
    :request="getList"
    :columns="columns"
    :search="searchConfig"
  >
    <!-- 工具栏 -->
    <template #toolbar>
      <el-button class="btn">
        Add Bank Account
        <i class="el-icon-plus"></i>
      </el-button>
    </template>
    <template #operate="scope">
      <el-dropdown>
        <i class="el-icon-more operate-icon"></i>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>编辑</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </pro-table>
  <pro-table
    ref="table2"
    title="Cash & Bank Transaction"
    :request="getList2"
    :columns="columns2"
    :search="searchConfig2"
  >
    <template #date="{row}">
      {{ parseTime(row.date, '{y}-{m}-{d}') }}
    </template>
    <template #amount="{row}">
      <span :class="row.amountType === '+' ? 'success' : 'danger'">
        {{ row.amountType }}
      </span>
      {{ row.amount }}
    </template>
    <template #filter>
      <el-button>
        <svg-icon name="bug" />
        Filter
      </el-button>
    </template>
    <!-- 工具栏 -->
    <template #toolbar>
      <el-button class="btn">
        Add Transaction
        <i class="el-icon-plus"></i>
      </el-button>
    </template>
    <template #operate="scope">
      <el-dropdown>
        <i class="el-icon-more operate-icon"></i>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>编辑</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { GetBankAccount, GetTransaction } from '@/api/home'
import { parseTime } from '@/utils'

export default defineComponent({
  name: 'home',
  setup() {
    const state = reactive({
      data: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 11 },
      ],
      config: {
        height: 350,
        autoFit: true,
        xField: 'year',
        yField: 'value',
        smooth: true,

        point: {
          size: 5,
          shape: 'circle',
          // style: {
          //   fill: 'white',
          //   stroke: '#5B8FF9',
          //   lineWidth: 2,
          // },
        },
        meta: {
          value: {
            max: 15,
          },
        },
      },
      // 表格列配置，大部分属性跟el-table-column配置一样
      columns: [
        { label: 'Account', prop: 'account' },
        { label: 'Currency', prop: 'currency' },
        { label: 'Balance', prop: 'balance' },
        {
          label: '',
          width: 80,
          align: 'center',
          tdSlot: 'operate', // 自定义单元格内容的插槽名称
        },
      ],
      // 搜索配置
      searchConfig: {
        inputWidth: '300px', // 必须带上单位
        fields: [
          {
            type: 'text',
            label: 'Account',
            name: 'account',
            // placeholder: 'Search',
          },
        ],
      },

      // 请求函数
      async getList(params) {
        console.log(params)
        // params是从组件接收的，包含分页和搜索字段。
        const { code, data } = await GetBankAccount(params)

        // 必须要返回一个对象，包含data数组和total总数
        if (+code === 200) {
          return {
            data: data.list,
            total: +data.total,
          }
        }
        return {
          data: [],
          total: 0,
        }
      },

      // 表格列配置，大部分属性跟el-table-column配置一样
      columns2: [
        { label: 'Ref No.', prop: 'number', width: 120 },
        { label: 'Type', prop: 'type', width: 150 },
        { label: 'Paid To/Received From', prop: 'paid', width: 240 },
        { label: 'Date', tdSlot: 'date', width: 120 },
        { label: 'Amount', tdSlot: 'amount' },
        {
          label: '',
          width: 80,
          align: 'center',
          tdSlot: 'operate', // 自定义单元格内容的插槽名称
        },
      ],
      // 搜索配置
      searchConfig2: {
        inputWidth: '300px', // 必须带上单位
        fields: [
          {
            type: 'text',
            label: 'Ref No.',
            name: 'number',
            // placeholder: 'Search',
          },
          {
            type: 'custom',
            slot: 'filter',
          },
          {
            type: 'select',
            label: 'Time',
            defaultValue: 1,
            style: { width: '100px' },
            options: [
              {
                value: 1,
                name: 'All time',
              },
              {
                value: 2,
                name: 'time2',
              },
              {
                value: 3,
                name: 'time3',
              },
            ],
          },
        ],
      },
      // 请求函数
      async getList2(params) {
        console.log(params)
        // params是从组件接收的，包含分页和搜索字段。
        const { code, data } = await GetTransaction(params)

        // 必须要返回一个对象，包含data数组和total总数
        if (+code === 200) {
          return {
            data: data.list,
            total: +data.total,
          }
        }
        return {
          data: [],
          total: 0,
        }
      },
    })

    return { ...toRefs(state), parseTime }
  },
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
.chart {
  padding: 24px 100px;
  margin: 20px 0 0;
  background: #fff;
  border-radius: 4px;
}
.btn {
  color: $mainColor;
  font-weight: bold;
}
.operate-icon {
  transform: rotate(90deg);
}
.success {
  color: #288e51;
}
.danger {
  color: #ed6c6c;
}
</style>
